﻿<html>  
  <head>  
        <meta charset="utf-8">  
        <title>11.4.5 旋转</title>  
  </head> 
  <style>
	.country {
		stroke: black;
		stroke-width: 1px;
	}
	
	.graticule{
		fill: none;
		stroke: #888;
		stroke-width: 1px;
	}
  </style>
<body>
<script src="../../d3/d3.min.js"></script>
<script>

var width = 800,
	height = 400;
	
var svg = d3.select("body").append("svg")
			.attr("width", width)
			.attr("height", height);


var ortho = d3.geo.orthographic()
					.scale(130)
					.translate([width/2, height/2])
					.rotate([60,0,0])
					.clipAngle(90);
					
	
var path = d3.geo.path()
				.projection(ortho);
	
var graticule = d3.geo.graticule()
					.extent([[-180,-90],[180,90]])
					.step([10,10]);
					
svg.append("path")
	.attr("class","graticule")
	.attr("d",path(graticule()));
	
var color = d3.scale.category20();


d3.json("world_605kb.json", function(error, root) {
	if (error) 
		return console.error(error);

	var groups = svg.append("g");
		
	groups.selectAll("path")
			.data( root.features )
			.enter()
			.append("path")
			.attr("class","country")
			.attr("d",path)
			.style("fill",function(d,i){
				return color(i);
			});
			
});

</script>
		
    </body>  
</html>  